/**
 * Creates base structure for Toolbar
 * @member Ext.toolbar.Toolbar
 */
@mixin extjs-toolbar {
  .#{$prefix}toolbar {
    font-size: $toolbar-font-size;

    border: 1px solid;

    padding: $toolbar-vertical-spacing 0 $toolbar-vertical-spacing $toolbar-horizontal-spacing;

    .#{$prefix}form-item-label {
      font-size: $toolbar-font-size;
      line-height: 15px;
    }

    .#{$prefix}toolbar-item {
      margin: 0 $toolbar-horizontal-spacing 0 0;
    }

    .#{$prefix}toolbar-text {
      margin-left: 4px;
      margin-right: 6px;
      white-space: nowrap;
      color: $toolbar-text-color;
      line-height: $toolbar-text-line-height;
      font-family: $toolbar-text-font-family;
      font-size: $toolbar-text-font-size;
      font-weight: $toolbar-text-font-weight;
    }

    .#{$prefix}toolbar-separator {
      display: block;
      font-size: 1px;
      overflow: hidden;
      cursor: default;
      border: 0;
    }

    .#{$prefix}toolbar-separator-horizontal {
      margin: 0 3px 0 2px;

      height: 14px;
      width: 0px;

      border-left: 1px solid $toolbar-separator-color;
      border-right: 1px solid $toolbar-separator-highlight-color;
    }
  }

  @if $include-ie {
    .#{$prefix}quirks .#{$prefix}ie .#{$prefix}toolbar .#{$prefix}toolbar-separator-horizontal {
      width: 2px;
    }
  }

  .#{$prefix}toolbar-footer {
    background: transparent;
    border: 0px none;
    margin-top: 3px;

    padding: $toolbar-footer-vertical-spacing 0 $toolbar-footer-vertical-spacing $toolbar-footer-horizontal-spacing;

    .#{$prefix}box-inner {
      border-width: 0;
    }

    .#{$prefix}toolbar-item {
      margin: 0 $toolbar-footer-horizontal-spacing 0 0;
    }
  }

  .#{$prefix}toolbar-vertical {
    padding: $toolbar-vertical-spacing $toolbar-horizontal-spacing 0 $toolbar-horizontal-spacing;

    .#{$prefix}toolbar-item {
      margin: 0 0 $toolbar-horizontal-spacing 0;
    }

    .#{$prefix}toolbar-text {
      margin-top: 4px;
      margin-bottom: 6px;
    }

    .#{$prefix}toolbar-separator-vertical {
      margin: 2px 5px 3px 5px;

      height: 0px;
      width: 10px;
      line-height: 0px;

      border-top: 1px solid $toolbar-separator-color;
      border-bottom: 1px solid $toolbar-separator-highlight-color;
    }
  }

  .#{$prefix}toolbar-scroller {
    padding-left: 0;
  }

  .#{$prefix}toolbar-spacer {
    width: $toolbar-spacer-width;
  }

  // Background for overflow button inserted by the Menu box overflow handler within a toolbar
  .#{$prefix}toolbar-more-icon {
    background-image: theme-background-image($theme-name, 'toolbar/more.gif') !important;
    background-position: 2px center !important;
    background-repeat: no-repeat;
  }

  @include extjs-toolbar-ui(
                  'default',
          $background-color: $toolbar-background-color,
          $background-gradient: $toolbar-background-gradient,
          $border-color: $toolbar-border-color
  );

  //plain toolbars have no border
  //by default they get no color, so they are transparent. IE6 doesnt support transparent borders
  //so we must set the width to 0.
  .#{$prefix}toolbar-plain {
    border: 0;
  }
}

/**
 * Creates a visual theme for an Toolbar.
 * @param {String} $ui The name of the UI
 * @param {Color} $background-color The background color of the toolbar (defaults to transparent)
 * @param {Gradient/color-stops} $background-gradient The background gradient of the toolbar (defaults to null)
 * @param {Color} $border-color The border color of the toolbar (defaults to null)
 * @member Ext.toolbar.Toolbar
 */
@mixin extjs-toolbar-ui(
  $ui,

  $background-color: transparent,
  $background-gradient: null,

  $border-color: null
) {
  .#{$prefix}toolbar-#{$ui} {
    @if $border-color != null {
      border-color: $border-color;
    }

    @include background-gradient($background-color, $background-gradient);
  }

  @if not $supports-gradients or $compile-all {
    @if $background-gradient != null {
      .#{$prefix}nlg {
        .#{$prefix}toolbar-#{$ui} {
          background-image: theme-background-image($theme-name, 'toolbar/toolbar-#{$ui}-bg.gif') !important;
          background-repeat: repeat-x;
        }
      }
    }
  }
}
